<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设置</title>
    <link rel="stylesheet" href="../common/style/reset.css" />
    <style>
        /* 滚动槽 */
      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      ::-webkit-scrollbar-track {
        border-radius: 3px;
        background: transparent;
        /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.08); */
      }
      /* 滚动条滑块 */
      ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: var(--bg-select);
        -webkit-box-shadow: inset 0 0 10px var(--shadow-color);
      }

      .row{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 100%;
      }
      .row-title{
        width: 100%;
        font-size: 12px;
        margin-bottom: 10px;
      }

      .row-content{
        padding: 5px;
      }

      .tomato-title{
        width: 80%;
        font-size: 16px;
      }

      input{
        display: block;
        margin: 0 auto;
        background-color: transparent;
        outline: none;
        /* border: none; */
        border-bottom: 2px solid var(--bg-list-color);
        width: 40%;
        text-align: center;
        color: var(--font-color);
        font-size: 20px;
      }

      .footer{
        margin-top: 20px;
      }

      .save-btn{
        width: 60px;
        height: 30px;
        background-color: var(--bg-color);
        margin: 0 0 0 auto;
        text-align: center;
        line-height: 30px;
        box-shadow: 0 0 10px var(--shadow-color);
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <tab-win>
      <div class="row">
        <div class="row-title">标题：</div>
        <div class="row-content">
          <input class="tomato-title" value="" placeholder="请输入">
        </div>
      </div>
      <div class="row">
        <div class="row-title">专注：</div>
        <div class="row-content">
          <input class="study-time" max="240" maxlength="3" type="number" value="25">
        </div>
      </div>
      <div class="row">
        <div class="row-title">休息：</div>
        <div class="row-content">
          <input class="rest-time" max="240" maxlength="3" type="number" value="5">
        </div>
      </div>
      <div class="row">
        <div class="row-title">自动：</div>
        <div class="row-content">
          <liu-switch class="auto" width="40" height="20"  checked="false"></liu-switch>
        </div>
      </div>
      <div class="footer">
        <div class="save-btn">保存</div>
      </div>
    </tab-win>
  </body>
  <script type="module">
    import TabWin from "../components/Window.js";
    import LiuSwitch from "../components/Switch.js";
    customElements.define("tab-win", TabWin);
    customElements.define("liu-switch", LiuSwitch);

    const tomatoTitleEl = document.querySelector(".tomato-title");
    const studyTimeEl = document.querySelector(".study-time");
    const restTimeEl = document.querySelector(".rest-time");
    const saveEl = document.querySelector(".save-btn");
    const autoEl = document.querySelector(".auto");


    if(window.ipcRenderer){
      window.ipcRenderer.on('init', (event, res) => {
        tomatoTitleEl.value = res.title;
        studyTimeEl.value = res.studyTime / 60 / 1000;
        restTimeEl.value = res.restTime / 60 / 1000;
        autoEl.setAttribute("checked", res.auto);
      });
    }


    const filterNum = (e, num) => {
      const value = e.target.value;
      if (value > num) {
        e.target.value = num;
      }
      if (value < 0) {
        e.target.value = 0;
      }

      if (value.length > 3) {
        e.target.value = value.slice(0, 2);
      }
    };


    studyTimeEl.oninput = (e) => filterNum(e, 240);
    restTimeEl.oninput = (e) => filterNum(e, 240);
    

    saveEl.onclick = () => {
      let data = {
        title: tomatoTitleEl.value,
        studyTime: parseInt(studyTimeEl.value) * 60 * 1000 ,
        restTime: parseInt(restTimeEl.value) * 60 * 1000 ,
        auto: autoEl.checked
      }
      
      if(window.toParentPage){
        window.toParentPage(data);
      }
    };

  </script>
</html>
